<template>
  <a-modal
    v-model:visible="visib"
    :title="type === 'create' ? '新建部门' : '编辑部门'"
    :destroyOnClose="true"
    @ok="onOk"
  >
    <div class="content">
      <a-form layout="vertical">
        <a-form-item label="部门名称" v-bind="validateInfos.orgName">
          <a-input v-model:value="form.orgName" placeholder="请输入部门名称" />
        </a-form-item>
        <a-form-item label="上级部门" v-bind="validateInfos.parentId">
          <a-tree-select
            v-model:value="form.parentId"
            :getPopupContainer="GetPopupContainer"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData"
            :load-data="onLoadData"
            :disabled="form.parentId === 'root'"
            placeholder="请选择父级部门"
          />
        </a-form-item>
        <a-form-item label="部门负责人" v-bind="validateInfos.orgManage">
          <a-select
            v-model:value="form.orgManage"
            :options="userList"
            placeholder="请选择部门负责人"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  ref,
  reactive,
  onBeforeMount,
  watchEffect,
} from 'vue';
import { useStore } from 'vuex';
import { Form } from 'ant-design-vue';
import { ResponseHandle, GetPopupContainer } from '@/global/util/preUtils';
const useForm = Form.useForm;

export default defineComponent({
  name: 'TreeModal',
  props: {
    curItem: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'create',
    },
  },
  setup(prop, context) {
    const store = useStore();
    const userList = ref([]);
    const visib = computed({
      get: () => prop.visible,
      set: (value) => context.emit('update:visible', value),
    });
    const treeData = ref<any>([]);
    const form = reactive({
      orgName: '',
      parentId: undefined,
      orgManage: undefined,
    });
    const formRule = reactive({
      orgName: [
        { required: true, trigger: 'change', message: '请输入部门名称' },
      ],
      parentId: [
        { required: true, trigger: 'change', message: '请选择父级部门' },
      ],
      orgManage: [{ required: false, trigger: 'change' }],
    });
    const { validate, validateInfos } = useForm(form, formRule);
    watchEffect(async () => {
      if (prop.type === 'edit') {
        form.orgName = prop.curItem.title;
        form.parentId = prop.curItem.parentKey;
        form.orgManage = prop.curItem.orgManage;
        const res = await store.dispatch('organization/getUserListByDept', {
          orgId: prop.curItem?.key,
          setStore: false,
        });
        if (res.code === 0) {
          userList.value = res.data.map((it: any) => {
            return {
              label: it.username,
              value: it.userid,
            };
          });
        } else {
          userList.value = [];
        }
      }
    });
    const onLoadData = async (treeNode: any) => {
      const res = await store.dispatch('organization/getOrgList', {
        parentId: treeNode.key,
      });
      ResponseHandle(res, () => {
        treeNode.dataRef.children = res.data.map((it: any) => {
          return {
            title: it.orgName,
            value: it.orgId,
          };
        });
        treeData.value = [...treeData.value];
      });
    };

    onBeforeMount(async () => {
      const res = await store.dispatch('organization/getOrgList', {
        parentId: 'root',
      });
      ResponseHandle(res, async () => {
        treeData.value = res.data.map((it: any) => {
          return {
            title: it.orgName,
            value: it.orgId,
          };
        });
      });
    });
    const onOk = () => {
      validate().then(() => {
        context.emit('onOk', form);
        visib.value = false;
      });
    };

    return {
      GetPopupContainer,
      visib,
      treeData,
      userList,
      validateInfos,
      form,
      onLoadData,
      onOk,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  .ant-select {
    width: 100%;
  }
  :deep .ant-select-selector {
    border-radius: 4px;
  }
  :deep .ant-input {
    border-radius: 4px;
  }
}
</style>
